<template>
	<view class="flex-col page  bg-theme flex-1">
		<view class="flex-col pt-2 mt-1 px-3 flex-1">
			<view class="bg-white brs-12 text-666D73  flex-1 mb-3 px-3 d-flex flex-col justify-between">
				<view>
					<view class="warning   d-flex flex-column">
						<view class="font-bold text-black font-18  mt-4 pt-1   mb-12 d-flex items-center">
							<image src="../../static/imgs/auth-a.png" style="width: 48rpx;height: 48rpx;" mode="">
							</image>
							<text class="ps-2 ms-1">实名认证</text>
						</view>
					</view>
					<view class="font-14  mt-1" style="color: #606266;line-height: 50rpx;">
						根据平台相关要求，租用使用共享舞蹈教室须满18周岁，实名认证后才能预约
					</view>
					<view class="pt-3 mt-2">
						<u-input v-model="form.name" placeholder="姓名" type="text" height="88"
							:custom-style="inputStyle">
						</u-input>
					</view>
					<view class="pt-3 mt-2">
						<u-input placeholder="身份证号" v-model="form.id_card" type="idcard" height="88"
							:custom-style="inputStyle">
						</u-input>
					</view>
					<view class="pt-4 mt-2" style="color:#909399 ;">
						<view class="font-14">*note:</view>
						<view class="font-12 pt-2 mt-2">实名信息会在您授权的范围内使用，我们会尊重你的隐私和保护你的个人数据，绝不泄漏，请放心填写</view>
					</view>
				</view>
				<view class="mb-4">
					<button class="button font-20 bg-white text-white bg-theme w-100" @click="submit">提交认证</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					id_card: '',
				},
				inputStyle: {
					fontSize: '16px',
					fontWeight: 400,
					background: '#F6F6F6',
					borderRadius: '44rpx',
					paddingLeft: '46rpx'
				},
			}
		},
		methods: {
			submit() {
				if (!this.form.name) return uni.$u.toast('请输入姓名')
				if (!this.form.id_card) return uni.$u.toast('请输入身份证号码')
				if (!this.$u.test.idCard(this.form.id_card)) return uni.$u.toast('请输入正确的身份证号码')
				this.$u.api.checkNameAndIdCardApi(this.form).then((res) => {
					if (res.code == 1) {
						this.$u.toast('实名成功')
						if (this.vuex_has_login) {
							this.$u.api.getUserInfo().then(res => {
								this.$u.vuex('vuex_user', {
									...this.vuex_user,
									...res.data
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							})
						}
					} else {
						this.$u.toast(res.msg)
					}


				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.button {
		padding: 0 16px;
		height: 96rpx;
		line-height: 96rpx;
		font-weight: 600;
		border-radius: 40rpx 0 40rpx 40rpx;

		&[disabled]:not([type]) {
			background-color: #AAB5BF !important;
		}
	}
</style>